<template>
	<view class="model" :class="theme">
		<!-- #ifndef MP-TOUTIAO -->
		<u-navbar title="首页" leftIconSize="0" :bgColor="theme == 'light' ? '#0071ff' : '#2c2c2c'"
			:safeAreaInsetTop="true" :placeholder="true" titleStyle="color:#fff">
		</u-navbar>
		<!-- #endif -->
		<!-- <view class="u-font-40 u-m-t-50 title">
			我是您贴心的AI助理
		</view> -->
		<view class="header">
			<view class="top">
				<view>
					<u--image class="image" :showLoading="true" src="https://pic1.zhimg.com/v2-ccad3b657451c1897093c045e3067e0c_720w.jpg?source=172ae18b" radius="100" width="200rpx" height="200rpx">r</u--image>
				</view>
				<view class="main">
					<view> 勤学好问AI </view>
					<view>
						<u-button style="color: #3a48a7;" :plain="true" text="欢迎到来"></u-button>
					</view>
				</view>
			</view>
			<view class="title">AI由人类创造，服务于人类</view>
		</view>
		<view class="u-font-24 subtitle u-m-t-20">
			回答您所有的问题，快选择一个角色和我聊天吧！
		</view>
		<view class="model-content u-flex u-flex-between">
			<block v-for="(item,index) in appList" :key="index">
				<view class="model-content-item u-m-t-20" :class="{actived:item.id === model.id}" @click="changeModel(item)">
					<view class="model-content-item-title">
						<image :src="baseImg + item.appImg" mode=""></image>
						<view class="u-m-l-15" style="font-weight: bold;font-size: 28rpx;">
							{{item.appName}}
						</view>
					</view>
					<view class="u-font-24 u-m-t-8">
						<mp-html :content="item.appDesc"></mp-html>
					</view>
				</view>
			</block>
		</view>
		<tabbar ref="tabBar" />
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	
	export default {
		computed: mapState({
			// 从state中拿到数据 箭头函数可使代码更简练
			tabbar: state => state.tabbar,
			robot: state => state.robot,
			modelList: state => state.modelList,
			appList: state => state.appList,
			model: state => state.model,
		}),
		data() {
			return {
				Customer: 'https://work.weixin.qq.com/kfid/kfcee998e7e38733a2c',
				addList: [],
				Img: undefined
			}
		},
		onLoad(e) {
			uni.hideTabBar()
			if(e.invitation){
				uni.setStorageSync("invitation", invitation);
			}
		},
		methods: {
			//联系客服
			Contact() {

			},
			//切换应用信息
			async changeModel(item) {
				console.log(item)
				//查询应用内容模板
				uni.showModal({
					title: '温馨提示',
					content: '切换AI助理将会清除之前对话，是否确定切换？',
					success: async (res) => {
						if (res.confirm) {
							uni.removeStorageSync('chat')
							uni.removeStorageSync('contNameTen')
							item.name = item.appName
							item.img = item.appImg
							this.$store.commit('setModel', item)
							uni.showToast({title: '您已成功将AI助手切换为' + item.name,icon: 'none'})
							let {data} = await uni.$u.http.get(`/aiv/appContents/list?appId=${item.id}`);
							console.log(data)
							this.$store.commit('setTentList', data.rows)
							setTimeout(() => {
								return uni.switchTab({url: "/pages/main/chat/index",});
							}, 500)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.model {
		padding: 10rpx;
		box-sizing: border-box;
		background: var(--bg);

		.header {
			margin: 10rpx 20rpx;
			padding: 20rpx;
			background-color: white;
			border-radius: 10rpx;

			.top {
				display: flex;

				.main {
					padding: 10rpx 0rpx;
					font-weight: bold;
					display: flex;
					flex-direction: column;
					margin-left: 40rpx;
					justify-content: space-between;
				}
			}

			.title {
				text-align: left;
				margin-top: 20rpx;
			}
		}

		.title,
		.subtitle {
			color: var(--font-black);
			width: 100%;
			text-align: center;

		}

		.subtitle {
			color: #999;
		}

		&-content {
			display: flex;
			margin: 20rpx 0rpx;
			flex-wrap: wrap;

			&-item {
				display: flex;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
				padding: 10rpx 16rpx;
				border-radius: 10rpx;
				flex-direction: column;
				width: 335rpx;
				margin: 15rpx;
				position: relative;
				border: 2px solid #fff;

				background: var(--white);

				&.actived {
					border: 2px solid $uni-color-primary;
				}

				&-title {
					color: var(--font-black);
					height: 90rpx;
					width: 280rpx;
					display: flex;
					border-bottom: 0.5rpx solid #f0f0f0;
					align-items: center;
				}

				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 10%;
				}

				.isVip {
					position: absolute;
					top: 20rpx;
					left: 20rpx;
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

	}
</style>